<!--
 * @Author: anxia.ack anchenkai@come-future.com
 * @Date: 2025-04-20 20:28:22
 * @LastEditors: anxia.ack anchenkai@come-future.com
 * @LastEditTime: 2025-04-20 20:47:52
 * @FilePath: /free-learning/src/views/course-manage/course-chapters/tour.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { useUserStore } from "@/store";
import tourConfig from "@/utils/tourConfig";

defineOptions({
  name: "CourseChaptersTour",
});
const openTour = ref(false);
const emit = defineEmits<{
  (e: "finish"): void;
}>();
const userStore = useUserStore();
onMounted(() => {
  const isFirstInCourseChapters = tourConfig.getTourConfig("isFirstInCourseChapters");
  openTour.value =
    (isFirstInCourseChapters === undefined ? true : isFirstInCourseChapters) &&
    userStore.userInfo.perms.includes("sys:course:pass");
});
const handleFinish = () => {
  openTour.value = false;
  tourConfig.setTourConfig("isFirstInCourseChapters", false);
  emit("finish");
};
</script>

<template>
  <el-tour v-model="openTour" :show-close="false" @finish="handleFinish">
    <el-tour-step target="#courseChapterAdd-tour" placement="right" title="新增课程分集">
      <template #default>
        <p>这里可以新增课程分集</p>
      </template>
    </el-tour-step>
    <el-tour-step target="#courseChapterSort-tour" placement="right" title="章节排序">
      <template #default>
        <p>这里可以对课程分集进行排序</p>
      </template>
    </el-tour-step>
    <el-tour-step target="#courseChapterWatchVideo-tour" placement="right" title="查看视频">
      <template #default>
        <p>这里可以查看课程分集的视频</p>
      </template>
    </el-tour-step>
    <el-tour-step target="#courseChapterEdit-tour" placement="right" title="编辑">
      <template #default>
        <p>这里可以编辑课程分集</p>
      </template>
    </el-tour-step>
    <el-tour-step target="#courseChapterDelete-tour" placement="right" title="删除">
      <template #default>
        <p>这里可以删除课程分集</p>
      </template>
    </el-tour-step>
  </el-tour>
</template>

<style lang="scss" scoped></style>
